<template>
  <div class="photo" v-loading="loading" :element-loading-text="$t('oralScan.oralScan_116')">
    <el-card class="version-log-management-page__header">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="query.userId" :placeholder="$t('oralScan.oralScan_46')" clearable />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="query.softwareVersion"
            :placeholder="$t('oralScan.oralScan_47')"
            clearable
          />
        </el-col>

        <el-col :span="4">
          <el-input
            v-model="query.caseNumber"
            :placeholder="$t('oralScan.oralScan_61')"
            clearable
          />
        </el-col>

        <el-col :span="6">
          <el-date-picker
            v-model="dates"
            :end-placeholder="$t('versionLogManagement.version02')"
            :start-placeholder="$t('versionLogManagement.version01')"
            format="yyyy-MM-dd"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-col>

        <el-col :span="6" class="query_btn">
          <el-button type="primary" icon="el-icon-search" @click="toSearch">
            {{ $t('versionLogManagement.version00') }}
          </el-button>
          <el-button type="primary" @click="exportExcel()">
            {{ $t('orderManage.export') }}
          </el-button>
          <el-button @click="reset()">{{ $t('add.add124') }}</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table_box">
      <el-table :data="tableData" style="width: 100%" height="570" border resizable>
        <el-table-column
          prop="userId"
          :label="$t('oralScan.oralScan_5')"
          align="center"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="softwareVersion"
          :label="$t('oralScan.oralScan_37')"
          align="center"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="caseNumber"
          :label="$t('oralScan.oralScan_61')"
          align="center"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="operationType"
          :label="$t('oralScan.oralScan_39')"
          align="center"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="startTime"
          :label="$t('oralScan.oralScan_15')"
          align="center"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="endTime"
          :label="$t('oralScan.oralScan_16')"
          align="center"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="photosNumber"
          :label="$t('oralScan.oralScan_63')"
          align="center"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="diagnosisTreatmentStageNumber"
          :label="$t('oralScan.oralScan_64')"
          align="center"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="templateName"
          :label="$t('oralScan.oralScan_65')"
          align="center"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column :label="$t('oralScan.oralScan_66')" align="center">
          <el-table-column
            prop="facialPhotoLeft90Smile"
            :label="$t('oralScan.oralScan_67')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="facialPhotoLeft45Smile"
            :label="$t('oralScan.oralScan_68')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="facialPhotoPositiveSmile"
            :label="$t('oralScan.oralScan_69')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="facialPhotoRight45Smile"
            :label="$t('oralScan.oralScan_70')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="facialPhotoRight90Smile"
            :label="$t('oralScan.oralScan_71')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_72')" align="center">
          <el-table-column
            prop="underfaceOneThirdPhotoLeft90Smile"
            :label="$t('oralScan.oralScan_67')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="underfaceOneThirdPhotoLeft45Smile"
            :label="$t('oralScan.oralScan_68')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="underfaceOneThirdPhotoPositiveSmile"
            :label="$t('oralScan.oralScan_69')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="underfaceOneThirdPhotoRight45Smile"
            :label="$t('oralScan.oralScan_70')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="underfaceOneThirdPhotoRight90Smile"
            :label="$t('oralScan.oralScan_71')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_73')" align="center">
          <el-table-column
            prop="intraoralPhotoFrontalBite"
            :label="$t('oralScan.oralScan_74')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoFrontalSeparation"
            :label="$t('oralScan.oralScan_75')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoFrontalExtension"
            :label="$t('oralScan.oralScan_76')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoRight45Bite"
            :label="$t('oralScan.oralScan_77')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoMaxillaryDentitionFront"
            :label="$t('oralScan.oralScan_78')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoLeft45Bite"
            :label="$t('oralScan.oralScan_79')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoMaxillaryArch"
            :label="$t('oralScan.oralScan_80')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoMandibleDentitionFront"
            :label="$t('oralScan.oralScan_81')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="intraoralPhotoMandibularArch"
            :label="$t('oralScan.oralScan_82')"
            align="center"
            width="120"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column
          prop="time"
          :label="$t('orderManage.orderCreateTime')"
          align="center"
          width="180"
          show-overflow-tooltip
        />
      </el-table>
    </div>

    <el-pagination
      background
      :current-page="query.page"
      :page-size="query.limit"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onPageSizeChange"
      @current-change="onPageChange"
    />
  </div>
</template>

<script>
import { formatDate } from '@/utils/index';
import { exportExl } from '@/utils/xls';
export default {
  name: 'caseSum',

  data() {
    return {
      loading: false,
      dates: [],
      query: {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        userId: '',
        softwareVersion: '',
        caseNumber: '',
      },
      total: 0,
      tableData: [],
    };
  },

  created() {
    this.toSearch();
  },
  mounted() {},
  methods: {
    toSearch() {
      this.query.page = 1;
      this.search();
    },
    assignmentQuery() {
      if (this.dates && this.dates.length > 0) {
        this.query.startTime = this.dates[0];
        this.query.endTime = this.dates[1];
      } else {
        this.query.startTime = '';
        this.query.endTime = '';
      }

      this.query.page = String(this.query.page);
      this.query.limit = String(this.query.limit);
    },
    search() {
      this.assignmentQuery();
      this.$http({
        url: '/caseLabelDataRecord/dentalImagePhotoTypeDataRecord',
        method: 'post',
        data: this.query,
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onPageSizeChange(pageSize) {
      this.query.limit = pageSize;
      this.search();
    },
    onPageChange(page) {
      this.query.page = page;
      this.search();
    },
    reset() {
      this.dates = [];
      this.query = {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        userId: '',
        softwareVersion: '',
        caseNumber: '',
      };
      this.toSearch();
    },

    exportExcel() {
      this.loading = true;
      this.assignmentQuery();
      this.$http({
        method: 'post',
        url: 'caseLabelDataRecord/dentalImagePhotoTypeDataRecordExportExcel', //后端接口
        responseType: 'blob',
        data: {
          page: this.query.page,
          limit: String(this.total),
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          userId: this.query.userId,
          softwareVersion: this.query.softwareVersion,
          caseNumber: this.query.caseNumber,
        },
      }).then(({ data: res }) => {
        let date = formatDate(new Date(), 'second');
        exportExl(res, `${this.$t('oralScan.oralScan_57')}_${date}.xls`);
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.photo {
  width: 100%;
  height: 100%;

  .el-date-editor {
    width: 100%;
  }

  .table_box {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .query_btn {
    text-align: right;
  }
}
</style>
